const color = ["#39FFA2", "#FF3E3D", "#00A2FF", "#FA8F3C", "#9254DE", "#F759AB", "#EAAC01", "#E55C02", "#2EB5EB", "#67C901", "#33EE97", "#33EE97", "#347DC9"];

const gridNum = "5%"

// 零星维修项目占比 近7天
export const onOption1 = () => {
  return {
    color,
    tooltip: {
      trigger: "item",
      formatter: (e) => {
        return `${e.name}(${e.value}) \n ${e.percent}%`;
      },
    },
    grid: {
      top: gridNum,
      left: gridNum,
      right: gridNum,
      bottom: gridNum,
      containLabel: true,
    },
    textStyle: {
      color: "#fff",
    },
    // legend: {
    //   orient: 'vertical',
    //   left: 'left',
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    series: [
      {
        type: "pie",
        radius: "55%",
        data: [
          { value: 1048, name: '水', label: { color: color[0] } },
          { value: 735, name: '电', label: { color: color[1] } },
          { value: 580, name: '222', label: { color: color[2] } },
          { value: 484, name: '啊啊', label: { color: color[3] } },
          { value: 300, name: '啊啊啊', label: { color: color[4] } },
        ],
        label: {
          normal: {
            show: true,
            formatter: (e) => {
              return `${e.name}(${e.value}) \n ${e.percent}%`;
            },
            textStyle: {
              align: "center",
              baseline: "middle",
              color: "#fff",
              lineHeight: 20,
            },
          },
        },
      },
    ],
  };
};

// 发帖情况分析 近15天
export const onOption2 = () => {
  return {
    color,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      type: "scroll",
      data: ["2022年", "2023年"],
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: gridNum,
      right: gridNum,
      bottom: gridNum,
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["a", "b", "c", "d", "e", "f", "g"],
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      name: "单位（m³)",
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
        }
      }
    },
    series: [
      {
        type: "bar",
        name: "2022年",
        data: [65, 22, 42, 66, 65, 72, 80],
      },
      {
        type: "bar",
        name: "2023年",
        data: [65, 22, 42, 66, 65, 72, 80],
      },
    ],
  };
};

// 各物业任务完成情况 近7天
export const onOption3 = () => {
  return {
    color: ["#39FFA2", "#FF3E3D"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: gridNum,
      right: gridNum,
      bottom: gridNum,
      containLabel: true,
    },
    legend: {
      type: "scroll",
      data: ["已完工", "未完工"],
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      type: "category",
      data: ["2023-03-24", "2023-03-25", "2023-03-26", "2023-03-27", "2023-03-28", "2023-03-29", "2023-03-30"],
      axisLabel: {
        // interval: 0,
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      minInterval: 1,
      name: "单位(个)",
      nameTextStyle: {
        color: "#fff",
        fontWeight: "bold",
      },
      nameGap: 20,
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "已完工",
        type: "bar",
        barMaxWidth: 14,
        stack: "总量",
        data: [65, 22, 42, 66, 65, 72, 0],
      },
      {
        name: "未完工",
        type: "bar",
        barMaxWidth: 14,
        stack: "总量",
        data: [9, 7, 10, 12, 8, 6, 0],
      },
    ],
  };
};

// 各物业任务完成情况 近7天
export const onOption4 = (seriesData = []) => {
  return {
    color: color,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    grid: {
      left: gridNum,
      right: gridNum,
      bottom: gridNum,
      containLabel: true,
    },
    legend: {
      data: ["Evaporation", "Temperature"],
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        data: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "Evaporation",
        position: "left",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: color[0],
          },
        },
        axisLabel: {
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          formatter: "{value} ml",
        },
      },
      {
        type: "value",
        name: "温度",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: color[1],
          },
        },
        axisLabel: {
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          formatter: "{value} °C",
        },
      },
    ],
    series: [
      {
        name: "Evaporation",
        type: "bar",
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
        ],
      },
      {
        name: "Temperature",
        type: "line",
        yAxisIndex: 1,
        data: [
          2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
        ],
      },
    ],
  };
};
